<template>
  <n-space v-if="todoList" vertical>
    <Progress :all="allCount" :done="finishCount"/>
    <div style="display: flex;justify-content: center">
      <n-space wrap>
        <TaskCard v-for="task in todoList" :key="task.id" :task="task"/>
      </n-space>
    </div>
  </n-space>
  <div v-else style="display: flex;justify-content: center;align-items: center">
    <n-empty size="huge" description="这天没有待办哦，看看其他日期的吧"/>
  </div>
</template>

<script setup>
import TaskCard from "./TaskCard.vue";
import {inject, onMounted, ref, watch} from "vue";
import Progress from "../common/Progress.vue";

const todoList = inject('todoList')
const finishCount = ref(0)
const allCount = ref(0)

watch(todoList, () => {
  calProgress()
})

onMounted(() => {
  calProgress()
})

function calProgress() {
  if (!todoList.value) {
    finishCount.value = 0
    allCount.value = 0
    return
  }
  let finishTaskCount = 0
  for (const t of todoList.value) {
    if (t.status.code === 2 || t.status.code === 4) {
      finishTaskCount++
    }
  }

  finishCount.value = finishTaskCount
  allCount.value = todoList.value.length
}

</script>

<style scoped>

</style>